<template>
	<view class="list_content">
		<view class="list_box" v-for="(item, index) in list" :key="item.id">
			<view class="list_head">
				<span class="time">保存时间：{{ item.time }}</span>
			</view>
			<view class="list_body">
				<u--image :showLoading="true" :src="item.src" radius="2px" width="90px" height="100px"></u--image>
				<view class="list_describe">
					<view class="list_title">{{ item.title }}</view>
					<view class="list_about">
						<span v-for="(topicItem, topicIndex) in item.topicList" :key="topicItem.name">#{{ topicItem.name }}</span>
					</view>
					<view class="list_icons">
						<!-- <u-button text="编辑" color="#FE0000" class="revoke_button"></u-button> -->
						<!-- <u-button text="删除" :plain="true" color="#FE0000" class="revoke_button delete_button" style="color: #FE0000;"></u-button> -->
						<tn-button height="30px" backgroundColor="#FE0000" fontColor="#FFFFFF" style="float: right;">
							编辑
						</tn-button>
						<tn-button height="30px" :plain="true" backgroundColor="#FE0000" fontColor="#FE0000" style="float: right;margin-right: 10px;">
							删除
						</tn-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			commentIcon: require('@/pages/users/static/xingzu/comment.png'),
			list: [
				{
					id: 1,
					src: 'https://cdn.uviewui.com/uview/album/1.jpg',
					title: '周末一起去赶集，优质农产品带回家',
					topicList: [{ name: '乡村农产品' }, { name: '新鲜水果' }],
					commentNum: 0,
					likeNum: 0,
					shareNum: 0,
					isLike: false,
					time: '2024-06-19 10:00:00',
				},
				{
					id: 2,
					src: 'https://cdn.uviewui.com/uview/album/1.jpg',
					title: '周末一起去赶集，优质农产品带回家',
					topicList: [{ name: '乡村农产品' }, { name: '新鲜水果' }],
					commentNum: 0,
					likeNum: 1239,
					shareNum: 0,
					isLike: true,
					time: '2024-06-19 10:00:00',
				},
			]
		}
	},
	methods: {

	}
}
</script>

<style>
page {
	background-color: #F6F6F6;
}
</style>
<style scoped>
.list_content {
	padding: 0 16px 0 16px;
}
.list_box {
	width: 100%;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 10px;
	margin-top: 12px;
}
.list_head {
	font-size: 12px;
}
.time {
	color: #9CA3AF;
}
.state {
	color: #FE0000;
	float: right;
	font-weight: bold;
}
.left_shift {
	margin-right: 8px;
}
.list_body {
	color: #1A1A1A;
	font-size: 16px;
	margin-top: 8px;
}
.list_describe {
	float: right;
	width: calc(100% - 102px);
	margin-top: -100px;
}
.list_title {
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
	overflow:hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.list_about {
	color: #808080;
	font-size: 14px;
	margin-top: 2px;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-o-text-overflow:ellipsis;
}
.list_about span:not(:first-child) {
	padding-left: 10px;
}
.list_icons {
	margin-top: 8px;
}
.icons {
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.icons_num {
	font-size: 14px;
	padding: 0 0 0 5px;
}
.more_icon {
	width: 3px;
	height: 12px;
	float: right;
	margin-top: 3px;
}
.revoke {
	margin-top: 18px;
}
.revoke_button {
	width: 68px;
	height: 30px;
	float: right;
}
.delete_button {
	margin-right: 10px;
}
</style>
